<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="css/regist.css"/>
    	<link rel="stylesheet" type="text/css" href="css/bg.css">
		<title>注册学生</title>
		<script src="js/jquery-3.3.1.js"></script>
   		<script src="js/jquery.vide.js"></script>
   		<script type="text/javascript">
		//前台校验
		var formObj = {
				checkForm : function(){
					var canSub = true;
					canSub = this.checkNull("account","账号不能为空") && canSub;
					canSub = this.checkNull("username","姓名不能为空") && canSub;
					canSub = this.checkNull("password","密码不能为空") && canSub ;
					canSub = this.checkNull("repassword","确认密码不能为空")&& canSub;
					canSub = this.checkNull("student_dormitory","宿舍号不能为空")&& canSub;
					canSub = this.checkNull("building_id","楼号不能为空")&& canSub;
					canSub = this.checkNull("student_phone","手机号不能为空")&& canSub;
					canSub = this.checkNull("validation","验证码不能为空")&& canSub;
					canSub = this.checkPhone()&& canSub;
					canSub = this.checkPassword()&& canSub;
					return canSub;
				},
				//密码一致性校验
				checkPassword : function(){
					var password = $("input[name='password']").val();
					var repassword = $("input[name='repassword']").val();
					if(password!=""&&repassword!=""&&password != repassword){
						this.setMsg("repassword", "两次密码不一致");
						return false;
					}
					return true;
				},
				//手机号格式校验
				checkPhone : function(){
					var regTel=/^[1][3,4,5,7,8][0-9]{9}$/;
					var phone = $("input[name='student_phone']").val();
					if(phone!="" && !regTel.test(phone)){
						this.setMsg("student_phone", "手机号输入有误");
						return false;
					}
					return true;
				},
				//非空校验
				checkNull : function(name,msg){
					var tag = $("input[name='"+name+"']").val();
					//清空操作
					this.setMsg(name, "");
					if($.trim(tag) == ""){
						this.setMsg(name, msg);
						return false;
					}
					return true;
				},
				setMsg : function(name,msg){
					//设置信息
					$("input[name='"+name+"']").nextAll("span").text(msg).css("color","red");
				}
		};
		//文档就绪事件
		$(function(){
			//鼠标离开焦点事件
			$("input[name='account']").blur(function(){
				formObj.checkNull("account", "账号不能为空");
				//获取账号框中的数据，作为ajax请求的参数传递。
				var account = $("input[name='account']").val();
				//如果账号为空则不应该发生ajax校验
				if($.trim(account)==""){
					return ;
				}
				
			});
			$("input[name='username']").blur(function(){
				formObj.checkNull("username", "密码不能为空");
			});
			$("input[name='password']").blur(function(){
				formObj.checkNull("password", "密码不能为空");
			});
			$("input[name='repassword']").blur(function(){
				formObj.checkNull("repassword", "确认密码不能为空");
				formObj.checkPassword();
			});
			$("input[name='student_dormitory']").blur(function(){
				formObj.checkNull("student_dormitory", "宿舍号不能为空");
				formObj.checkEmail();
			});
			$("input[name='building_id']").blur(function(){
				formObj.checkNull("building_id", "楼号不能为空");
				formObj.checkEmail();
			});
			$("input[name='student_phone']").blur(function(){
				formObj.checkNull("student_phone", "手机号不能为空");
				formObj.checkTelephone();
			});
			$("input[name='validation']").blur(function(){
				formObj.checkNull("validation", "验证码不能为空");	
			});
			//修改验证码图片
			$("#img").click(function(){
				$(this).attr("src","<%=request.getContextPath()%>/ValiImageServlet?time="+new Date().getTime());
			});
		});
		</script>
	</head>
	<body>
	 <form action="<%=request.getContextPath() %>/RegistStudentServlet" method="POST" onsubmit="return formObj.checkForm()">
   		<div class="login-form">
        	<h2>注册学生</h2>
        	<div style="color:red;text-align:center">
        		<%=request.getAttribute("msg")==null?"": request.getAttribute("msg")%>
        	</div>
        	<div class="form-input">
            	<input type="text" name="account" placeholder="请输入账号" value="<%=request.getParameter("account")==null?"":request.getParameter("account")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="text" name="username" placeholder="请输入姓名" value="<%=request.getParameter("username")==null?"":request.getParameter("username")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="password" name="password" placeholder="请输入密码" value="<%=request.getParameter("password")==null?"":request.getParameter("password")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="password" name="repassword" placeholder="确认密码" value="<%=request.getParameter("password")==null?"":request.getParameter("password")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="text" name="student_dormitory" placeholder="请输入宿舍号" value="<%=request.getParameter("student_dormitory")==null?"":request.getParameter("student_dormitory")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="text" name="building_id" placeholder="请输入楼号" value="<%=request.getParameter("building_id")==null?"":request.getParameter("building_id")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="text" name="student_phone" placeholder="请输入手机号" value="<%=request.getParameter("student_phone")==null?"":request.getParameter("student_phone")%>">
            	<span></span>
        	</div>
        	<div class="from-input-validation">
            	<input type="text" name="validation" placeholder="请输入验证码">
            	<span></span>
            	<img id="img" src="<%=request.getContextPath() %>/ValiImageServlet" width="" height="" alt="" />
        	</div>
        	<div class="form-input">
            	<input type="submit" name="login" value="注册">
            	<input type="button" value="返回登录" onclick="window.location.href='<%=request.getContextPath() %>/login.jsp'"/>
        	</div>
    	</div>
      </form>
	</body>
</html>